<template>
  <div class="dis">
    <el-row>
      <el-col :span="16">
        <div class="grid-content bg-purple">
          <div class="discuss">
            <h3>评论</h3>
            <div v-for="discussList in discusspingList" :key="discussList.discussId">
              <img :src="'/api/upload/' + discussList.userImg" alt class="tou" />
              <span class="pName">{{discussList.userName}}</span>
              <p class="ping">{{discussList.discussContent}}</p>
              <span class="time1">{{formateDate(discussList.discussTime)}}</span>
              <div class="xian"></div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple-light"></div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="14">
        <div class="grid-content bg-purple">
          <el-input
            type="textarea"
            :autosize="{ minRows: 8, maxRows: 12}"
            placeholder="请输入内容"
            v-model="textarea1"
          ></el-input>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="grid-content bg-purple-light"></div>
      </el-col>
    </el-row>
    <el-button :plain="true" class="publish" @click="fabu">发表评论</el-button>
  </div>
</template>
<style lang="css" scoped>
h3 {
  font-size: 20px;
}
.discuss {
  margin-left: 10px;
}
.discuss h3 {
  color: #e6a23c;
  font-size: 20px;
  font-weight: 700;
}
.discuss .tou {
  margin-top: 10px;
}
.ping,
.time1 {
  font-size: 14px;
  margin-left: 70px;
}
.el-textarea {
  margin-left: 30px;
  margin-top: 10px;
}
.publish {
  margin-left: 30px;
  width: 100px;
  height: 40px;
  background-color: #e6a23c;
  border: 1px solid #e6a23c;
  border-radius: 5px;
  color: #fff;
  margin-bottom: 60px;
  margin-top: 20px;
}
.pName {
  margin-left: 10px;
}
.xian {
  border: 0;
  border-top: 1px solid #ccc;
  margin-top: 15px;
  margin-bottom: 15px;
}
.tou {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.time,
.time1 {
  font-size: 15px;
  color: #ccc;
}
</style>
<script>
import moment from "moment"; //导入文件
export default {
  data() {
    return {
      textarea1: "",
      queryId: -1,
      discusspingList: [],
      getUserInfo: [],
      nowTime: new Date() //当前时间
    };
  },
  created() {
    this.queryId = this.$route.params.id;
    //获取用户信息
    this.$axios
      .get("/api/users/getUserInfo")
      .then(res => {
        this.getUserInfo = res.data.data;
        this.user = res.data.data[0].userId;
        // console.log('getUserInfo',this.getUserInfo)
      })
      .catch(err => {
        console.log("err:", err);
      });
    this.$axios
      .get("/api/createNote/getNote3", {
        params: { noteId: this.queryId }
      })
      .then(res => {
        // console.log("discusspingList:", res.data.data);
        this.discusspingList = res.data.data;
      })
      .catch(err => {
        console.log("err:", err);
      });
  },
  methods: {
    fabu() {
      if (this.textarea1 != null && this.getUserInfo.length != 0) {
        //添加评论信息
        this.$axios
          .get("/api/createNote/faNotediscuss", {
            params: {
              textarea: this.textarea1,
              noteId: this.queryId,
              userId: this.getUserInfo[0].userId
            }
          })
          .then(res => {
            // console.log("noteList:", res.data.data);
            this.noteList = res.data.data;
          })
          .catch(err => {
            console.log("err:", err);
          });
        this.discusspingList.unshift({
          discussContent: this.textarea1,
          discussId: this.queryId,
          discussTime: this.nowTime,
          notesId: this.queryId,
          type: 0,
          userId: this.getUserInfo[0].userId,
          userImg: this.getUserInfo[0].userImg,
          userName: this.getUserInfo[0].userName
        });
        this.textarea1 = "";
      } else {
        this.$message({
          message: "请登录！"
        });
      }
    },
    //获取当前时间（格式）
    formateDate1(nowTime) {
      var moment = require("moment");
      return moment(noeTime).format("YYYY-MM-DD");
    },
    // 时间格式转换
    formateDate: function(datetime) {
      function addDateZero(num) {
        return num < 10 ? "0" + num : num;
      }
      let d = new Date(datetime);
      let formatdatetime =
        d.getFullYear() +
        "-" +
        addDateZero(d.getMonth() + 1) +
        "-" +
        addDateZero(d.getDate()) +
        " " +
        d.getHours() +
        ":" +
        d.getMinutes() +
        ":" +
        d.getSeconds();
      return formatdatetime;
    }
  }
};
</script>